    // This is the custom JavaScript file referenced by index.html. You will notice
    // that this file is currently empty. By adding code to this empty file and
    // then viewing index.html in a browser, you can experiment with the example
    // page or follow along with the examples in the book.
    //
    // See README.txt for more information.
    // $(document).ready(function () {
    //     $('#switcher').click(function () {
    //         $('#switcher button').toggleClass('hidden');
    //     });
    // });
    //该js是要将switcher的子代元素都禁用了，只要求父代元素起作用，也就是 阻止冒泡效应
    // $(document).ready(function () {
    //     $('#switcher').click(function (event) {
    //         if (event.target==this){
    //             $('#switcher button').toggleClass('hidden');
    //         }
    //
    //     });
    // });

    // $(document).ready(function () {
    //     $('#switcher').click(function (event) {
    //             $('#switcher button').toggleClass('hidden');
    //         });
    // });
    // $(document).ready(function () {
    //     $('#switcher-default').addClass('selected');
    //     $('#switcher button').click(function (event) {
    //         var bodyClass=this.id.split('-')[1];
    //         $('body').removeClass().addClass(bodyClass);
    //         $('#switcher button').removeClass('selected');
    //         $(this).addClass('selected');
    //         event.stopPropagation();
    //     });
    // });
    // $(document).ready(function() {
    //     $('#switcher').hover(function() {
    //         $(this).addClass('hover');
    //         console.log(this);
    //     }, function() {
    //         $(this).removeClass('hover');
    //         console.log(this);
    //
    //     });
    // });
    // $(document).ready(function() {
    //     $('#switcher-default').addClass('selected');
    //
    //     $('#switcher').on('click', 'button', function() {
    //         var bodyClass = event.target.id.split('-')[1];
    //
    //         $('body').removeClass().addClass(bodyClass);
    //         $('#switcher button').removeClass('selected');
    //         $(this).addClass('selected');
    //     });
    // });
    // $(document).ready(function() {
    //     $('#switcher').on('click.collapse',function(event) {
    //         if (!$(event.target).is('button')) {
    //             $('#switcher button').toggleClass('hidden');
    //         }
    //     });
    //
    //     $('#switcher-narrow, #switcher-large').click(function() {
    //         $('#switcher').off('click.collapse');
    //     });
    // });

    // $(document).ready(function () {
    //    var toggleSwitcher=function (event) {
    //        if(!$(event.target).is('button')){
    //            $('#switcher button').toggleClass('hidden');
    //        }
    //    } ;
    //    $('#switcher').on('click',toggleSwitcher);
    //    $('#switcher button').click(function () {
    //        $('#switcher').off('click',toggleSwitcher);
    //        if(this.id=='switcher-default'){
    //            $('#switcher').on('click',toggleSwitcher);
    //        }
    //    });
    // });
    $(document).ready(function() {
        // Enable hover effect on the style switcher
        $('#switcher').hover(function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        });

        // Allow the style switcher to expand and collapse.
        var toggleSwitcher = function(event) {
            if (!$(event.target).is('button')) {
                $('#switcher button').toggleClass('hidden');
            }
        };
        $('#switcher').on('click', toggleSwitcher);

        // Simulate a click so we start in a collaped state.
        $('#switcher').click();

        // The setBodyClass() function changes the page style.
        // The style switcher state is also updated.
        var setBodyClass = function(className) {
            $('body').removeClass().addClass(className);

            $('#switcher button').removeClass('selected');
            $('#switcher-' + className).addClass('selected');

            $('#switcher').off('click', toggleSwitcher);

            if (className == 'default') {
                $('#switcher').on('click', toggleSwitcher);
            }
        };

        // begin with the switcher-default button "selected"
        $('#switcher-default').addClass('selected');

        // Map key codes to their corresponding buttons to click
        var triggers = {
            D: 'default',
            N: 'narrow',
            L: 'large'
        };

        // Call setBodyClass() when a button is clicked.
        $('#switcher').click(function(event) {
            if ($(event.target).is('button')) {
                var bodyClass = event.target.id.split('-')[1];
                setBodyClass(bodyClass);
            }
        });

        // Call setBodyClass() when a key is pressed.
        $(document).keyup(function(event) {
            var key = String.fromCharCode(event.which);
            if (key in triggers) {
                setBodyClass(triggers[key]);
            }
        });
    });

